<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            font-size: 12px;
            margin: 0;
        }

        nav {
            height: 40px;
            border-bottom: 1px solid #ccc;
        }

        ul {
            list-style-type: none;
            padding-left: 0;
            margin: 0;
            height: 40px;
        }

        li {
            text-align: center;
            font-size: 1.2rem;
            width: 200px;
            float: left;
            height: 40px;
            cursor: pointer;
        }

        ul>a {
            color: blue;
            text-decoration: none;
        }

        li>span {
            line-height: 40px;
        }
    </style>
</head>

<body>
    <nav>
        <ul id="menu">
            <a href="#visitor">
                <li><span>游客</span></li>
            </a>
            <a href="#manager">
                <li><span>管理员</span></li>
            </a>
            <a href="#administrator">
                <li><span>超级管理员</span></li>
            </a>
        </ul>
    </nav>
    <article id="insertPoint"></article>
</body>

</html>
<script>
    //监听地址栏上hash改变事件
    window.addEventListener('hashchange', event => {
        let url = location.hash.replace("#", "");   //提取hash部分的值并去掉井号前缀
        let insertPoint = document.getElementById("insertPoint");
        switch (url) {
            case "visitor":
                insertPoint.innerHTML = "游客信息显示"      //进行DOM操作，往页面中加入数据。
                break;
            case "manager":
                insertPoint.innerHTML = "管理员信息显示"
                break;
            case "administrator":
                insertPoint.innerHTML = "超级管理信息显示"
                break;
            default:
                insertPoint.innerHTML = "访问出错"
        }
    }, false);
</script>